<template>
  <div class="video-container">
    <video ref="lazyVideo" id="s_a__video" muted class="spread" @play="onVideoPlay">
      <source src="https://cdn-public.nio.com/www-nio-cn/asset-migration/page_ep9_experience/cdn-static/mynio/nextjs/images/ep9-experience/supercar-specs.mp4" type="video/mp4">
      浏览器不支持视频播放
    </video>
    <div class="scroll-count">
      Scroll Count: {{ scrollCount }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'LazyVideo',
  data() {
    return {
      lastScrollPosition: 0,
      scrollCount: 0, 
      timeAry: [
        { videoStartTime: 0, vineoEndTime: 3 }, // 1
        { videoStartTime: 3, vineoEndTime: 9 }, // 2
        { videoStartTime: 9, vineoEndTime: 12 }, // 3
        { videoStartTime: 12, vineoEndTime: 18 }, // 4
        { videoStartTime: 18, vineoEndTime: 21 }, // 5
        { videoStartTime: 21, vineoEndTime: 22 }, // 6
        { videoStartTime: 22, vineoEndTime: 25 }, // 7
        { videoStartTime: 25, vineoEndTime: 27 }, // 8
        { videoStartTime: 27, vineoEndTime: 29 }, // 9
        { videoStartTime: 29, vineoEndTime: 31 }, // 10
        { videoStartTime: 31, vineoEndTime: 33 }, // 11
        { videoStartTime: 33, vineoEndTime: 35 }, // 12
        { videoStartTime: 35, vineoEndTime: 38 }, // 13
        { videoStartTime: 38, vineoEndTime: 46 }, // 14
        { videoStartTime: 46, vineoEndTime: 47 }, // 15
      ],
      timeoutId: null 
    };
  },
  mounted() {
    window.addEventListener('wheel', this.handleWheel);
  },
  beforeDestroy() {
    window.removeEventListener('wheel', this.handleWheel);
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
  },
  methods: {
    handleWheel(event) {
      const video = this.$refs.lazyVideo;

      if (event.deltaY > 0 && video.paused) {
        this.scrollCount++; 
        if (this.scrollCount > this.timeAry.length) {
          this.scrollCount = 1; 
        }
        video.currentTime = this.timeAry[this.scrollCount - 1].videoStartTime; 
        video.play();
        window.removeEventListener('wheel', this.handleWheel); 
      }
    },
    onVideoPlay() {
      const video = this.$refs.lazyVideo;
      if (this.scrollCount <= this.timeAry.length) {
        if (this.timeoutId) {
          clearTimeout(this.timeoutId);
        }
        this.timeoutId = setTimeout(() => {
          video.pause();
          window.addEventListener('wheel', this.handleWheel); 
        }, (this.timeAry[this.scrollCount - 1].vineoEndTime - this.timeAry[this.scrollCount - 1].videoStartTime) * 1000); 
      }
    }
  }
}
</script>

<style scoped>
.video-container {
  width: 100%;
  height: 100vh; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  position: relative; 
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.scroll-count {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
}

@media (max-aspect-ratio: 16/9) {
  video {
    width: auto;
    height: 100%;
  }
}

@media (min-aspect-ratio: 16/9) {
  video {
    width: 100%;
    height: auto;
  }
}
</style>